<script setup lang="ts">
import { ref, PropType, watch, reactive, computed } from 'vue'
// import UQrcode from '@/uni_modules/uqrcode/components/u-qrcode/u-qrcode.vue'
import { doGetOrderGetCodeByStoreId } from '@pluginPackage/shopStore/apis'
import { DistributionMode } from '@/pluginPackage/goods/commodityInfo/types'
import QIcon from '@/components/q-icon/q-icon.vue'
import SelfPickup from '@/pluginPackage/order/orderDetail/components/self-pickup.vue'
import { OrderStatusPlus, getOrderDetailStatusPlus } from '@/hooks'
import type { ApiOrder } from '@/pluginPackage/order/orderList/types'
interface StoreInfo {
  code: string
  getPickUpTime: string
  shopStore: { storeName: string; functionaryPhone: string; detailedAddress: string }
}
interface WriteOffProps {
  code?: string
  personName: string
  personPhone: string
  pickupTime?: string
  orderStatus: OrderStatusPlus
}

const orderStatus = computed(() => getOrderDetailStatusPlus($props.info))

const address = computed(() => {
  if ($props.info.shopOrders[0].orderReceiver) {
    return $props.info.shopOrders[0].orderReceiver
  }
  if ($props.info.orderReceiver) {
    return $props.info.orderReceiver
  }
  return {
    address: '',
    id: '',
    mobile: '',
    name: '',
    area: [],
  }
})

const $props = defineProps({
  info: {
    type: Object as PropType<ApiOrder>,
    required: true,
  },
})

const writeOffInfo = reactive<WriteOffProps>({
  code: '',
  personName: address.value.name,
  personPhone: address.value.mobile,
  pickupTime: $props.info.extra?.packUpTime,
  orderStatus: orderStatus.value,
})
const storeInfo = ref<StoreInfo>({
  code: '',
  getPickUpTime: '',
  shopStore: { storeName: '', functionaryPhone: '', detailedAddress: '' },
})

watch(
  () => $props.info.extra,
  (val) => {
    if (val && val.shopStoreId) {
      initOrderGetCodeByStoreId()
    }
  },
  {
    immediate: true,
  },
)

async function initOrderGetCodeByStoreId() {
  if ($props.info.extra?.shopStoreId) {
    const { code, data } = await doGetOrderGetCodeByStoreId($props.info.extra.shopStoreId, $props.info.no)
    if (code !== 200) {
      uni.showToast({ title: '获取门店核销码失败', icon: 'none' })
      return
    }
    storeInfo.value = data
    writeOffInfo.code = data.code || ''
  }
}
const copyCode = () => {
  uni.setClipboardData({
    data: storeInfo.value.code,
    // success: function () {
    //     console.log('success');
    // }
  })
}
</script>

<template>
  <view class="storeinfo">
    <view class="storeinfo__title">自提点信息</view>
    <view class="storeinfo__location">
      <q-icon name="icon-icon-address" size="48rpx" color="#FA3534" />
      <view class="storeinfo__location--info">
        <text class="store-name">{{ storeInfo?.shopStore.storeName || info.shopOrders[0].shopName }}</text>
        <text>{{ storeInfo?.shopStore.functionaryPhone || info?.extra.contractNumber }}</text>
      </view>
    </view>
    <view class="storeinfo__address">{{ storeInfo?.shopStore.detailedAddress || info?.extra.address }}</view>
    <view class="storeinfo__distribution">
      <text>配送方式</text>
      <text>{{ $props.info.extra?.distributionMode && DistributionMode[$props.info.extra.distributionMode] }}</text>
    </view>
    <!-- <view class="storeinfo__head">
            <view class="storeinfo__head--tip">自提点</view>
            <view class="storeinfo__head--name">{{ storeInfo?.shopStore.storeName || '商家名称' }}</view>
            <view class="storeinfo__head--phone">{{ storeInfo?.shopStore.functionaryPhone || '手机号' }}</view>
        </view>
        <view class="storeinfo__address">{{ storeInfo?.shopStore.detailedAddress || '详情地址详情地址详情地址详情地址详情地址' }}</view>
        <view class="storeinfo__time"><span>提货时间：</span>{{ $props.info.extra?.packUpTime }}</view>
        <view class="storeinfo__distribution">
            <view class="storeinfo__distribution--title">
                <q-icon name="icon-dingdanxiangqing-wuliu" size="20px" />
                <text style="margin-left: 10rpx">配送方式</text>
            </view>
            <view>{{ $props.info.extra?.distributionMode && DistributionMode[$props.info.extra.distributionMode] }}</view>
        </view> -->
  </view>
  <self-pickup :info="writeOffInfo" />
  <!-- <view class="WriteOffCode">
        <view class="WriteOffCode__title">核销码</view>
        <view class="WriteOffCode__code">
            <u-qrcode ref="qrcodeRef" canvas-id="qrcode" size="100" :value="storeInfo?.code || '12345656'" />
        </view>
        <view class="WriteOffCode__word"
            >核销码 <span @click="copyCode"> {{ storeInfo?.code || '12345656' }}</span></view
        >
    </view> -->
</template>

<style scoped lang="scss">
// @include b(storeinfo) {
//     margin-top: 14rpx;
//     @include e(head) {
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         font-size: 28rpx;
//         padding: 0 20rpx;
//         font-weight: 700;
//         @include m(tip) {
//             font-size: 22rpx;
//             width: 120rpx;
//             height: 40rpx;
//             text-align: center;
//             line-height: 40rpx;
//             color: #e57a77;
//             border: 2rpx solid #e57a77;
//             background: #faeeee;
//             border-radius: 26rpx;
//             font-weight: normal;
//         }
//     }
//     @include e(address) {
//         font-size: 24rpx;
//         text-align: center;
//         margin: 26rpx 0 40rpx;
//     }
//     @include e(time) {
//         font-size: 24rpx;
//         margin-left: 20rpx;
//     }
//     @include e(distribution) {
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         padding: 0 20rpx;
//         font-size: 24rpx;
//         height: 80rpx;
//     }
// }
@include b(storeinfo) {
  background-color: #fff;
  margin: 20rpx auto 0;
  width: 710rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  @include e(title) {
    font-size: 28rpx;
    line-height: 39rpx;
    color: #333;
    padding: 0 10rpx;
  }
  @include e(location) {
    @include flex(flex-start);
    line-height: 48rpx;
    padding: 0 10rpx;
    margin-top: 20rpx;
    @include m(info) {
      margin-left: 10rpx;
      color: #333;
      font-size: 34rpx;
      @include b(store-name) {
        font-weight: 500;
        margin-right: 20rpx;
      }
    }
  }
  .storeinfo__address {
    margin-top: 20rpx;
    color: #666;
    font-size: 28rpx;
    line-height: 37rpx;
    padding: 0 10rpx;
    padding-bottom: 22rpx;
    border-bottom: 1rpx dashed #bdbdbd;
  }
  .storeinfo__distribution {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 10rpx 0;
    font-size: 26rpx;
    line-height: 36rpx;
    color: #999;
  }
}
@include b(WriteOffCode) {
  padding: 40rpx 30rpx 0;
  background: #fff;
  @include e(title) {
    font-size: 28rpx;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24rpx;
  }
  @include e(code) {
    @include flex;
    margin: 20px auto;
  }
  @include e(word) {
    width: 690rpx;
    height: 92rpx;
    line-height: 92rpx;
    text-align: center;
    color: #515151;
    border-radius: 4rpx;
    border: 1px solid #f2f2f2;
  }
}
</style>
